// 导入 useState 的函数
import React, { useState, useEffect } from 'react';

export const App = () => {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>消失/回来</button>
      <hr />
      {visible ? <Counter /> : null}
    </div>
  );
};

// 定义一个组件-函数组件
export const Counter = () => {
  // 和状态挂钩🪝
  const [count, setCount] = useState(1);

  // 依赖是空数组的场景
  useEffect(() => {
    // 页面渲染完毕后发起请求
    console.log('我是effect 执行');
    // 开启一个计时器
    const id = setInterval(() => {
      console.log('我是组件渲染完毕后添加的计时器');
    }, 1000);
    // 返回这次effect的清理函数
    return () => {
      console.log('清理函数执行');
      clearInterval(id);
    };
  }, []);

  // 箭头函数表达式
  const handleClick = (e) => {
    console.log(e);
    // 修改组件状态，要通过 setCount 函数
    // count = 10; // 不能直接修改
    // setCount(10);
    setCount(count + 1);
  };

  return (
    <div>
      <h3>我是使用hooks的组件</h3>
      <h1>{count}</h1>
      <button onClick={handleClick}>+1</button>
    </div>
  );
};
